<template>
  <div class="content">
    <a-breadcrumb :routes="routes">
      <template slot="itemRender" slot-scope="{route, params, routes, paths}">
        <span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}</span>
        <router-link v-else :to="`${basePath}/${paths.join('/')}`">{{route.breadcrumbName}}</router-link>
      </template>
    </a-breadcrumb>
  </div>
</template>
<script>
export default {
  data() {
    const { lang } = this.$route.params;
    return {
      basePath: `/${lang}/components/breadcrumb`,
      routes: [
        {
          path: "index",
          breadcrumbName: "首页"
        },
        {
          path: "first",
          breadcrumbName: "一级面包屑"
        },
        {
          path: "second",
          breadcrumbName: "当前页面"
        }
      ]
    };
  }
};
</script>
<style scoped>
.content{padding: 10px 27px 10px;background-color: white;}
</style>
